﻿<Fluent:RibbonWindow
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Fluent="clr-namespace:Fluent;assembly=Fluent"
    xmlns:FluentTest="clr-namespace:FluentTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:System="clr-namespace:System;assembly=mscorlib" x:Name="window" x:Class="FluentTest.TestWindow"
    Title="Fluent Ribbon Control Suite 1.3" Height="345" Width="770" mc:Ignorable="d" ResizeMode="CanResizeWithGrip"
    FlowDirection="LeftToRight"
    >
  <Grid>
  	<Grid.RowDefinitions>
  		<RowDefinition Height="Auto"/>
  		<RowDefinition Height="*"/>
  	</Grid.RowDefinitions>
    <ScrollBar HorizontalAlignment="Right" VerticalAlignment="Stretch" Margin="0,0,0,20" Maximum="10" Minimum="0" Grid.Row="1"/>
    <Fluent:Ribbon AutomaticStateManagement="True" BackstageBrush="Red" x:Name="ribbon" IsBackstageOpen="True">

      <Fluent:Ribbon.ContextualGroups>
        <Fluent:RibbonContextualTabGroup x:Name="tabGroup1" BorderBrush="Magenta" Background="Purple" Header="First" Visibility="Collapsed"/>
        <Fluent:RibbonContextualTabGroup x:Name="tabGroup2" BorderBrush="Green" Background="Lime" Header="Second" Visibility="Collapsed"/>
      </Fluent:Ribbon.ContextualGroups>

      <Fluent:Ribbon.BackstageItems>
        <Fluent:Button Text="Save"  Icon="Images\Save.png" Fluent:KeyTip.Keys="S" />
        <Fluent:Button Text="Save As"  Icon="Images\Save.png" Fluent:KeyTip.Keys="A"/>
        <Fluent:BackstageTabItem Header="Info" Fluent:KeyTip.Keys="E">
          <ScrollViewer>
            <Grid Height="400" Background="Red">
              <ListBox Width="100" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left">
                <ListBoxItem>1</ListBoxItem>
                <ListBoxItem>2</ListBoxItem>
                <ListBoxItem>3</ListBoxItem>
                <ListBoxItem>4</ListBoxItem>
                <ListBoxItem>5</ListBoxItem>
                <ListBoxItem>6</ListBoxItem>
                <ListBoxItem>7</ListBoxItem>
                <ListBoxItem>8</ListBoxItem>
                <ListBoxItem>9</ListBoxItem>
                <ListBoxItem>10</ListBoxItem>
              </ListBox>
              <Fluent:ComboBox SelectedIndex="1">
                <Fluent:GalleryItem>1</Fluent:GalleryItem>
                  <Fluent:GalleryItem>2</Fluent:GalleryItem>
                    <Fluent:GalleryItem>3</Fluent:GalleryItem>
                <Fluent:GalleryItem>4</Fluent:GalleryItem>
                <Fluent:GalleryItem>5</Fluent:GalleryItem>                           
          </Fluent:ComboBox>
            </Grid>
          </ScrollViewer>
        </Fluent:BackstageTabItem>
        <Fluent:BackstageTabItem Header="Recent" Fluent:KeyTip.Keys="R">
          <Fluent:BackstageTabControl Margin="20,5,20,5">
            <Fluent:GroupSeparatorMenuItem Text="Test1"/>
            <TabItem Header="1">
              
            </TabItem>
            <TabItem Header="2">

            </TabItem>
            <TabItem Header="3">

            </TabItem>
            <Fluent:GroupSeparatorMenuItem Text="Test2"/>
            <TabItem Header="4">

            </TabItem>
          </Fluent:BackstageTabControl>
        </Fluent:BackstageTabItem>
        <Fluent:BackstageTabItem Header="New" Fluent:KeyTip.Keys="N">
          <Grid Background="#550000FF" Opacity="1" Margin="50" MinWidth="0" Width="Auto" HorizontalAlignment="Stretch">
            <TextBlock HorizontalAlignment="Left" MinWidth="0" TextWrapping="Wrap" Foreground="Black">This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</TextBlock>
            <Fluent:Button IsDefinitive="False" IsEnabled="True" Style="{DynamicResource ButtonBackstageStyle}" HorizontalAlignment="Left" Click="OnBlueClick">123</Fluent:Button>
              <Fluent:DropDownButton Text="123" HorizontalAlignment="Right"></Fluent:DropDownButton>
            <Fluent:ComboBox VerticalAlignment="Bottom">
              <TextBlock Text="1"/>
              <TextBlock Text="2"/>
              <TextBlock Text="3"/>
              <TextBlock Text="4"/>
              <TextBlock Text="5"/>
            </Fluent:ComboBox>
            <Fluent:Spinner Value="1" Format="0" InputWidth="50" Text="Lala" HorizontalAlignment="Right" VerticalAlignment="Bottom" ValueChanged="OnSpinnerValueChanged"></Fluent:Spinner>
          </Grid>
        </Fluent:BackstageTabItem>
        <Fluent:BackstageTabItem Header="Print" Fluent:KeyTip.Keys="P">
          <Grid Background="Yellow" Opacity="0.3" Margin="50"/>
        </Fluent:BackstageTabItem>
        <Fluent:Button Text="Exit" Icon="Images\Exit.png" Fluent:KeyTip.Keys="X" Click="OnExitClick"/>
      </Fluent:Ribbon.BackstageItems>
      
      <Fluent:Ribbon.ToolBarItems>
        <Fluent:Button Size="Small" Icon="Images/Help.png" Click="OnHelpClick">
          <Fluent:Button.ToolTip>
              <Fluent:ScreenTip
                Title="Insert Chart"
                Text="Insert a chart to illustarate and compare data. &#xa;&#xa;Bar, Pie, Line, Area and Surface are same of the available types."
                Image="pack://application:,,,/FluentTest;component\Images\SampleImageForScreenTip.png"
                HelpTopic="http:\\fluent.codeplex.com"
                DisableReason="Disable reason reason."
                Width="190"
                IsRibbonAligned ="True"/> 
          </Fluent:Button.ToolTip>
        </Fluent:Button>        
      </Fluent:Ribbon.ToolBarItems>
                  
      <Fluent:Ribbon.QuickAccessItems>
        <Fluent:QuickAccessMenuItem Target="{Binding ElementName=pasteButton}"  IsChecked="True"/>
        <Fluent:QuickAccessMenuItem Target="{Binding ElementName=cutButton}" IsChecked="True"/>
        <Fluent:QuickAccessMenuItem Target="{Binding ElementName=copyButton}" />
      </Fluent:Ribbon.QuickAccessItems>

      <!--<FluentTest:TestRibbonTab/>-->
            <Fluent:RibbonTabItem   x:Name="homeTabItem" Header="Home" Fluent:KeyTip.Keys="H" ToolTip="Regular Tool Tip" 
            ReduceOrder="Font, Font, Font, Font,B,A,A,A,(A),(A),(A),Clipboard,Font,B,B,(A),C,(A),(A)">
                <Fluent:RibbonGroupBox Icon="Images/Default.png"  Fluent:KeyTip.Keys="C" x:Name="Clipboard" Header="Clipboard" IsLauncherVisible="True" LauncherClick="OnLauncherButtonClick" LauncherKeys="ZB">
          <Fluent:SplitButton x:Name="pasteButton" Fluent:KeyTip.Keys="V" Text="Paste" Icon="Images\Paste.png" LargeIcon="Images\PasteLarge.png" SizeDefinition="Large" Command="Paste">
            <Fluent:SplitButton.ToolTip>
               <Fluent:ScreenTip
                  Title="Paste (Ctrl+V)"
                  Text="Paste the contents of the Clipboard."
                  Width="190"
                  />
            </Fluent:SplitButton.ToolTip>
            <Fluent:Gallery VerticalScrollBarVisibility="Hidden" Orientation="Horizontal" GroupBy="Tag" Selectable="False" ItemWidth="32" ItemHeight="32">
              <Fluent:Gallery.ItemContainerStyle>
                <Style TargetType="{x:Type Fluent:GalleryItem}"  BasedOn="{StaticResource GalleryItemStyle}">
                  <Setter Property="Fluent:GalleryItem.Command" Value="Paste"/>
                </Style>
              </Fluent:Gallery.ItemContainerStyle>
              <Image Source="Images\PasteImage.png" Width="24" Height="24" Fluent:KeyTip.Keys="K" Tag="Paste Options:"/>
                <Image Source="Images\PasteText.png" Width="24" Height="24" Fluent:KeyTip.Keys="M" Tag="Paste Options:"/>
                <Image Source="Images\PasteTextOnly.png" Width="24" Height="24" Fluent:KeyTip.Keys="T" Tag="Paste Options:"/>
                <Image Source="Images\PasteFormating.png" Width="24" Height="24" Fluent:KeyTip.Keys="L" Tag="Paste Options:"/>
                <Image Source="Images\PasteSourceFormating.png" Width="24" Height="24" Fluent:KeyTip.Keys="E" Tag="Paste Options:"/>
            </Fluent:Gallery>
            <Fluent:MenuItem Text="Paste Special..." Fluent:KeyTip.Keys="S" Command="{x:Static FluentTest:TestWindow.CustomRoutedCommand}">
              <Fluent:MenuItem.ToolTip>
                <Fluent:ScreenTip Title="Paste Special"                                  
                                  Text="This ScreenTip is attached to menu item"/>
              </Fluent:MenuItem.ToolTip>
            </Fluent:MenuItem>
            <Fluent:MenuItem Text="Set Default Paste..." Fluent:KeyTip.Keys="A" Click="OnMenuItemClick">
              <Fluent:MenuItem Text="1"></Fluent:MenuItem>
              <Fluent:MenuItem Text="2"></Fluent:MenuItem>
            </Fluent:MenuItem>
          </Fluent:SplitButton>
        <Fluent:Button x:Name="cutButton" Fluent:KeyTip.Keys="X" Text="Cut" Icon="Images\Cut.png" SizeDefinition="Middle,Small" Command="Cut">
          <Fluent:Button.ToolTip>
            <Fluent:ScreenTip
               Title="Cut (Ctrl+X)"
               Text="Cut the contents to the Clipboard."
               Width="190"/>
          </Fluent:Button.ToolTip>
        </Fluent:Button>
        <Fluent:Button x:Name="copyButton" Fluent:KeyTip.Keys="C" Text="Copy" Icon="Images\Copy.png" SizeDefinition="Middle,Small" Command="Copy"/>
        <Fluent:Button Fluent:KeyTip.Keys="FP" Text="Format Painter" Icon="Images\FormatPainter.png" SizeDefinition="Middle,Small" Click="OnFormatPainterClick"/>        
      </Fluent:RibbonGroupBox>

		<Fluent:RibbonGroupBox Fluent:KeyTip.Keys="ZF" x:Name="Font" Header="Font" IsLauncherVisible="True" LauncherClick="OnLauncherButtonClick" Icon="Images\FontColor.png" LauncherKeys="NF">
      <Fluent:RibbonToolBar>
        
        <!--ToolBar Layout Definitions-->
        <Fluent:RibbonToolBar.LayoutDefinitions>
          <Fluent:RibbonToolBarLayoutDefinition Size="Large">
            <Fluent:RibbonToolBarRow>
              <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontName" Width="75"/>
              <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontSize" Width="45"/>              
              <Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlDefinition Target="buttonGrowFont"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonShrinkFont"/>                
              </Fluent:RibbonToolBarControlGroupDefinition>
              <Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlDefinition Target="buttonChangeCase"/>
              </Fluent:RibbonToolBarControlGroupDefinition>
              <Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlDefinition Target="buttonClearFormatting"/>
              </Fluent:RibbonToolBarControlGroupDefinition>
            </Fluent:RibbonToolBarRow>
            <Fluent:RibbonToolBarRow>
              <Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlDefinition Target="buttonBold"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonItalic"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonUnderline"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonStrikethrough"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonSubscript"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonSuperscript"/>
              </Fluent:RibbonToolBarControlGroupDefinition>
              <Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlDefinition Target="buttonTextEffects"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonTextHighlightColor"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonFontColor"/>
              </Fluent:RibbonToolBarControlGroupDefinition>
            </Fluent:RibbonToolBarRow>
          </Fluent:RibbonToolBarLayoutDefinition>

          <Fluent:RibbonToolBarLayoutDefinition Size="Middle">
              <Fluent:RibbonToolBarRow>
                <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontName" Width="125"/>
                <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontSize" Width="50"/>
              </Fluent:RibbonToolBarRow>
            <Fluent:RibbonToolBarRow>
              <Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlDefinition Target="buttonBold"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonItalic"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonUnderline"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonStrikethrough"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonSubscript"/>
                <Fluent:RibbonToolBarControlDefinition Target="buttonSuperscript"/>
              </Fluent:RibbonToolBarControlGroupDefinition>
              <Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlDefinition Target="buttonClearFormatting"/>
              </Fluent:RibbonToolBarControlGroupDefinition>
              </Fluent:RibbonToolBarRow>
            <Fluent:RibbonToolBarRow>
                <Fluent:RibbonToolBarControlGroupDefinition>
                  <Fluent:RibbonToolBarControlDefinition Target="buttonTextEffects"/>
                  <Fluent:RibbonToolBarControlDefinition Target="buttonTextHighlightColor"/>
                  <Fluent:RibbonToolBarControlDefinition Target="buttonFontColor"/>
                  <Fluent:RibbonToolBarControlDefinition Target="buttonChangeCase"/>
                </Fluent:RibbonToolBarControlGroupDefinition>
                <Fluent:RibbonToolBarControlGroupDefinition>
                  <Fluent:RibbonToolBarControlDefinition Target="buttonGrowFont"/>
                  <Fluent:RibbonToolBarControlDefinition Target="buttonShrinkFont"/>                 
                </Fluent:RibbonToolBarControlGroupDefinition>
              </Fluent:RibbonToolBarRow>              
            </Fluent:RibbonToolBarLayoutDefinition>
        </Fluent:RibbonToolBar.LayoutDefinitions>

        <!--ToolBar Controls-->
        <Fluent:ComboBox x:Name="comboBoxFontName" MinWidth="40" Height="22" SelectedItem="{Binding ElementName=segoeFont}" BorderBrush="Gainsboro" Foreground="#FF222222" GroupBy="Tag" DisplayMemberPath="Text" IsTextSearchEnabled="True" ResizeMode="Vertical" Fluent:KeyTip.Keys="FF"  MenuMinWidth="160" SizeDefinition="Small">
          <TextBlock Text="Arial" Tag="Theme Fonts"/>
          <TextBlock Text="Tahoma" Tag="Theme Fonts"/>
          <TextBlock Text="Tahoma" Tag="Recent Used Fonts"/>
          <TextBlock Text="Arial" Tag="AllFonts"/>
          <TextBlock Text="Segoe UI" Tag="AllFonts" x:Name="segoeFont"/>
          <TextBlock Text="Tahoma" Tag="AllFonts"/>
          <TextBlock Text="Webdings" Tag="AllFonts"/>
          <TextBlock Text="Winding" Tag="AllFonts"/>
        </Fluent:ComboBox>
        <Fluent:ComboBox x:Name="comboBoxFontSize" Width="49" HorizontalAlignment="Left" Height="22" SelectedIndex="1" BorderBrush="Gainsboro" Foreground="#FF222222" CurrentText="12" DisplayMemberPath="Text" IsEditable="False" SizeDefinition="Small">
          <TextBlock Text="7"/>
          <TextBlock Text="8"/>
          <TextBlock Text="9"/>
          <TextBlock Text="10"/>
          <TextBlock Text="11"/>
          <TextBlock Text="12"/>
          <TextBlock Text="14"/>
          <TextBlock Text="16"/>
          <TextBlock Text="18"/>
          <TextBlock Text="20"/>
          <TextBlock Text="22"/>
          <TextBlock Text="24"/>
          <TextBlock Text="28"/>
          <TextBlock Text="32"/>
          <TextBlock Text="36"/>
          <TextBlock Text="48"/>
          <TextBlock Text="72"/>
        </Fluent:ComboBox>
        <Fluent:Button Fluent:KeyTip.Keys="GF" x:Name="buttonGrowFont" Icon="Images\GrowFont.png"  HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:Button x:Name="buttonShrinkFont" Icon="Images\ShrinkFont.png"  HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:DropDownButton x:Name="buttonChangeCase" Icon="Images\ChangeCase.png"  HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:Button x:Name="buttonClearFormatting" Icon="Images\ClearFormatting.png"  HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:ToggleButton  Fluent:KeyTip.Keys="B" x:Name="buttonBold" Icon="Images\Bold.png" HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:ToggleButton x:Name="buttonItalic" Icon="Images\Italic.png"  HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:DropDownButton x:Name="buttonUnderline" Icon="Images\Underline.png"  HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:Button x:Name="buttonStrikethrough" Icon="Images\Strikethrough.png" HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:Button x:Name="buttonSubscript" Icon="Images\Subscript.png" HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:Button x:Name="buttonSuperscript" Icon="Images\Superscript.png" HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:DropDownButton IsEnabled="False" x:Name="buttonTextEffects" Icon="Images\TextEffects.png" HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:DropDownButton x:Name="buttonTextHighlightColor" Icon="Images\TextHighlightColor.png" HorizontalAlignment="Left" SizeDefinition="Small"/>
        <Fluent:DropDownButton x:Name="buttonFontColor" Icon="Images\FontColor.png" HorizontalAlignment="Left" SizeDefinition="Small"/>
      </Fluent:RibbonToolBar>
		</Fluent:RibbonGroupBox>

	    
   <Fluent:RibbonGroupBox Icon="Images/Default.png"  x:Name="A"  Fluent:KeyTip.Keys="A" Header="Galleries" IsLauncherVisible="True" LauncherClick="OnLauncherButtonClick">     
     <Fluent:InRibbonGallery Icon="Images/Default.png" LargeIcon="Images/GalleryLarge.png" x:Name="inRibbonGallery1" SelectedItem="{Binding ElementName=ghh, Mode=OneWay}"  Text="In-Ribbon Gallery" Fluent:KeyTip.Keys="JS" SelectedFilter="{Binding ElementName=galleryFilterAll}" ResizeMode="Both" ItemsInRow="7" MinItemsInRow="2" MaxItemsInRow="7" SizeDefinition="Large" Orientation="Horizontal" ItemWidth="40" ItemHeight="56" GroupBy="Tag" CanCollapseToButton="True">
        <Fluent:InRibbonGallery.Filters>
          <Fluent:GalleryGroupFilter Title="All" Groups="Group1,Group2" x:Name="galleryFilterAll"/>
          <Fluent:GalleryGroupFilter Title="Group1 L" Groups="Group1"/>
          <Fluent:GalleryGroupFilter Title="Group2 L" Groups="Group2"/>
        </Fluent:InRibbonGallery.Filters>
        <Fluent:InRibbonGallery.GroupIcons>
          <Fluent:GalleryGroupIcon GroupName="Group1" Icon="Images/Default.png" />
        </Fluent:InRibbonGallery.GroupIcons>
        <Fluent:InRibbonGallery.MenuItems>
          <Fluent:MenuItem Text="Lala5" Fluent:KeyTip.Keys="E"/>
          <Fluent:MenuItem Text="Lala5" Fluent:KeyTip.Keys="R">
            <Fluent:MenuItem Text="Lalaq" Fluent:KeyTip.Keys="A" IsChecked="true"/>
            <Fluent:MenuItem Text="Lalaw" Fluent:KeyTip.Keys="B"/>
            <Fluent:MenuItem Text="Lalae" Fluent:KeyTip.Keys="C"/>
          </Fluent:MenuItem>
        </Fluent:InRibbonGallery.MenuItems>
        <Border Tag="Group1" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >1</TextBlock></Border>
        <Border Tag="Group1" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >2</TextBlock></Border>
        <Border Tag="Group1" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >3</TextBlock></Border>
        <Border Tag="Group1" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >4</TextBlock></Border>
        <Border Tag="Group1" x:Name="ghh" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >33</TextBlock></Border>
        <Border Tag="Group2" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >5</TextBlock></Border>
        <Border Tag="Group2" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >6</TextBlock></Border>
        <Border Tag="Group2" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >7</TextBlock></Border>
        
              </Fluent:InRibbonGallery>
             
     <Fluent:SplitButton Icon="Images/Default.png" LargeIcon="/Images/GalleryLarge.png" Text="Split" Fluent:KeyTip.Keys="S" Click="OnSplitClick" ResizeMode="Both" SizeDefinition="Large">
                <Fluent:Gallery x:Name="gallery" MinHeight="60" ItemsInRow="3" ItemWidth="28" ItemHeight="28">                  
                  <Border Tag="Group1" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >1</TextBlock></Border>
                  <Border Tag="Group1" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >2</TextBlock></Border>
                  <Border Tag="Group1" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >3</TextBlock></Border>
                  <Border Tag="Group2" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >4</TextBlock></Border>
                  <Border Tag="Group2" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >5</TextBlock></Border>
                  <Border Tag="Group2" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >6</TextBlock></Border>
                  <Border Tag="Group2" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >7</TextBlock></Border>
                  <Border Tag="Group3" BorderThickness="1" BorderBrush="Aqua"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" >8</TextBlock></Border>                  
                </Fluent:Gallery>
                <Fluent:MenuItem Text="Item5" Fluent:KeyTip.Keys="E"/>
                <Fluent:MenuItem Text="Item5" Fluent:KeyTip.Keys="R">
                  <Fluent:MenuItem Text="Itemq" Fluent:KeyTip.Keys="A"/>
                  <Fluent:MenuItem Text="Itemw" Fluent:KeyTip.Keys="B"/>
                  <Fluent:MenuItem Text="Iteme" Fluent:KeyTip.Keys="C"/>
                </Fluent:MenuItem>
              </Fluent:SplitButton>

        </Fluent:RibbonGroupBox>
        <Fluent:RibbonGroupBox Icon="Images/Default.png" Fluent:KeyTip.Keys="ZXK" x:Name="C" Header="Themes" IsLauncherVisible="False" LauncherClick="OnLauncherButtonClick">
          <Fluent:Button Click="OnSilverClick" Icon="Images/SilverTheme.png" SizeDefinition="Middle">Silver</Fluent:Button>
          <Fluent:Button Click="OnBlackClick" Icon="Images/BlackTheme.png" SizeDefinition="Middle">Black</Fluent:Button>
          <Fluent:Button Click="OnBlueClick" Icon="Images/BlueTheme.png" SizeDefinition="Middle">Blue</Fluent:Button>
        </Fluent:RibbonGroupBox>
        <Fluent:RibbonGroupBox Icon="Images/Default.png" Fluent:KeyTip.Keys="ZXB" x:Name="B" Header="Spinners" IsLauncherVisible="True" LauncherClick="OnLauncherButtonClick">
          <Fluent:Spinner Fluent:KeyTip.Keys="KA" InputWidth="75" Format="0 px" Text="Left:" Icon="pack://application:,,,/Fluent;component/Themes/Office2010/Images/WarningSmall.png" IsEnabled="False"/>
          <Fluent:Spinner Fluent:KeyTip.Keys="KB" InputWidth="75" Format="0 px" Text="Right:" Icon="pack://application:,,,/Fluent;component/Themes/Office2010/Images/WarningSmall.png"/>
          <Fluent:Spinner Fluent:KeyTip.Keys="KC" InputWidth="75" Format="0 px" Text="Top:" Icon="pack://application:,,,/Fluent;component/Themes/Office2010/Images/WarningSmall.png"/>
          
        </Fluent:RibbonGroupBox>       
      </Fluent:RibbonTabItem>
      <Fluent:RibbonTabItem Fluent:KeyTip.Keys="Y" Header="Insert" IsSeparatorVisible="true" ReduceOrder="groupLL, groupLL, groupLL, (groupLL),(groupLL),(groupLL),(groupLL),(groupLL)">
        <Fluent:RibbonGroupBox Fluent:KeyTip.Keys="FG" Header="LongLongGroup" IsLauncherVisible="False" x:Name="groupLL">
          <Fluent:InRibbonGallery x:Name="inRibbonGallery" Icon="pack://application:,,,/Fluent;component/Themes/Office2010/Images/WarningSmall.png" Text="Split" Fluent:KeyTip.Keys="S" GroupBy="Tag" ResizeMode="Both" MaxItemsInRow="6" MinItemsInRow="2" ItemWidth="40" ItemHeight="55" ItemsInRow="5">
            <Fluent:InRibbonGallery.Filters>
              <Fluent:GalleryGroupFilter Title="All" Groups="Group1,Group2" x:Name="galleryFilterAll2"/>
              <Fluent:GalleryGroupFilter Title="Group1" Groups="Group1"/>
              <Fluent:GalleryGroupFilter Title="Group2" Groups="Group2"/>
            </Fluent:InRibbonGallery.Filters>
            <Fluent:InRibbonGallery.GroupIcons>
              <Fluent:GalleryGroupIcon GroupName="Group1" Icon="pack://application:,,,/Fluent;component/Themes/Office2010/Images/WarningSmall.png" />
            </Fluent:InRibbonGallery.GroupIcons>
            <TextBlock Tag="Group1">1</TextBlock>
            <TextBlock Tag="Group1">2</TextBlock>
            <TextBlock Tag="Group1">3</TextBlock>
            <TextBlock Tag="Group1">4</TextBlock>
            <TextBlock Tag="Group1">5</TextBlock>
            <TextBlock Tag="Group1">6</TextBlock>
            <TextBlock Tag="Group2">1</TextBlock>
            <TextBlock Tag="Group2">2</TextBlock>
            <TextBlock Tag="Group2">3</TextBlock>
          </Fluent:InRibbonGallery>
          <Fluent:Button Icon="Images\GrowFont.png" LargeIcon="Images\GrowFont.png" Text="Enlarge" Click="OnEnlargeClick"/>
          <Fluent:Button Icon="Images\ShrinkFont.png" LargeIcon="Images\ShrinkFont.png" Text="Reduce" Click="OnReduceClick"/>
          <Fluent:Button Icon="Images\Box.png" LargeIcon="Images\Box.png" Text="Cmd" Command="{x:Static FluentTest:TestWindow.CustomRoutedCommand}"/>
        </Fluent:RibbonGroupBox>
        <Fluent:RibbonGroupBox Header="LongLongGroup" IsLauncherVisible="False">
          <Fluent:Button SizeDefinition="Large,Large,Large"></Fluent:Button>
        </Fluent:RibbonGroupBox>
      </Fluent:RibbonTabItem>
      <Fluent:RibbonTabItem Header="Page Layout" >
        <Fluent:RibbonGroupBox Header="LongLongGroup" IsLauncherVisible="False">
          <Fluent:CheckBox>Text 1</Fluent:CheckBox>
          <Fluent:CheckBox>Text 2</Fluent:CheckBox>
          <Fluent:CheckBox>Text 3</Fluent:CheckBox>
        </Fluent:RibbonGroupBox>
      </Fluent:RibbonTabItem>
      <Fluent:RibbonTabItem Header="References">
        <Fluent:RibbonGroupBox x:Name="xxx" Header="LongLongGroup" IsLauncherVisible="True" LauncherCommand="Paste" LauncherClick="OnLauncherClick">
          <Fluent:Button Text="Button" Icon="Images\GrowFont.png" Command="ApplicationCommands.Paste"/>
          <Fluent:Button Text="Button" Icon="Images\GrowFont.png" Command="ApplicationCommands.Paste"/>
          <Separator/>
          <Fluent:Button Text="Button" Icon="Images\GrowFont.png" Command="ApplicationCommands.Paste"/>
          <Fluent:Button Text="Button" Icon="Images\GrowFont.png" Command="ApplicationCommands.Paste"/>
          <Separator/>
          <Fluent:Button Text="Button" Icon="Images\GrowFont.png" Command="ApplicationCommands.Paste"/>
        </Fluent:RibbonGroupBox>

        <Fluent:RibbonGroupBox >
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
          <Separator/>
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
          <Separator/>
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
        </Fluent:RibbonGroupBox>

        <Fluent:RibbonGroupBox >
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
          <Fluent:ToggleButton Text="Button2" GroupName="Group2"/>
        </Fluent:RibbonGroupBox>
        
      </Fluent:RibbonTabItem>
      
      <Fluent:RibbonTabItem Header="Mailings">
        <Fluent:RibbonGroupBox >
          <Fluent:ComboBox x:Name="someCombo" ItemsSource="{Binding TstArr, ElementName=window}" InputWidth="80" SelectedItem="{Binding TST, Mode=TwoWay, ElementName=window}" IsEditable="False"></Fluent:ComboBox>
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
          <Fluent:ToggleButton Text="Button1" GroupName="Group1"/>
        </Fluent:RibbonGroupBox>
      </Fluent:RibbonTabItem>
      <Fluent:RibbonTabItem Header="Review">
        <Fluent:RibbonGroupBox Header="LongLongGroup" IsLauncherVisible="False">

        </Fluent:RibbonGroupBox>
      </Fluent:RibbonTabItem>
      <Fluent:RibbonTabItem Header="View">
        <Fluent:RibbonGroupBox Header="LongLongGroup" IsLauncherVisible="False">
                    <Fluent:TextBox x:Name="textBox" InputWidth="70" MaxLength="5" Icon="Images\GrowFont.png" Text="Text" Content="CurrentText"/>
                </Fluent:RibbonGroupBox>
      </Fluent:RibbonTabItem>
      <Fluent:RibbonTabItem Header="Format" Group="{Binding ElementName=tabGroup1, Mode=OneWay}">
        <Fluent:RibbonGroupBox Header="LongLongGroup" IsLauncherVisible="False">

        </Fluent:RibbonGroupBox>
      </Fluent:RibbonTabItem>
      <Fluent:RibbonTabItem Header="Design" 
                             Group="{Binding ElementName=tabGroup2, Mode=OneWay}"/>      
      <Fluent:RibbonTabItem Header="Layout" Group="{Binding ElementName=tabGroup2, Mode=OneWay}">
        <Fluent:RibbonGroupBox Header="LongLongGroup" IsLauncherVisible="False">
          
        </Fluent:RibbonGroupBox>
      </Fluent:RibbonTabItem>    
    </Fluent:Ribbon>
        <Button x:Name="testBtn" Visibility="Collapsed" HorizontalAlignment="Left" Margin="33,5,0,0" VerticalAlignment="Top" Width="118" Height="20" Content="Button" Click="OnSomeTestClick" Grid.Row="1">
      <Button.ContextMenu>
        <Fluent:ContextMenu ResizeMode="Both">
          <Button VerticalAlignment="Stretch" Height="Auto">Lala</Button>
          <Fluent:MenuItem Text="Lala">
            <Fluent:MenuItem Text="Lala5" IsCheckable="True" GroupName="123"/>
            <Fluent:MenuItem Text="Lala6" IsCheckable="True" GroupName="123"/>
            <Fluent:MenuItem Text="Lala7">
              <Fluent:MenuItem Text="Lala7"/>
              <Fluent:MenuItem Text="Lala8">
                <Fluent:MenuItem Text="Lala7"/>
                <Fluent:MenuItem Text="Lala8">
                  <Fluent:MenuItem Text="Lala7"/>
                  <Fluent:MenuItem Text="Lala8"/>
                </Fluent:MenuItem>
              </Fluent:MenuItem>
            </Fluent:MenuItem>
            <Fluent:MenuItem Text="Lala8"/>
          </Fluent:MenuItem>
          <Fluent:MenuItem Text="Lala1"/>
          <Fluent:MenuItem Text="Lala2"/>
        </Fluent:ContextMenu>
        <!--<ContextMenu>
          <MenuItem Header="Lala"/>
          <MenuItem Header="Lala"/>
          <MenuItem Header="Lala">
            <MenuItem.Icon>
              <BitmapImage UriSource="Images\GrowFont.png"/>
            </MenuItem.Icon>
          </MenuItem>
        </ContextMenu>-->
      </Button.ContextMenu>
    </Button>

        <TreeView Visibility="Collapsed"  x:Name="logicalTreeView" Margin="0,30,20,0" Grid.Row="1"/>
    <!--<ListBox SelectedItem="{Binding ElementName=hte, Mode=OneWay}">
      <TextBlock Margin="15" Tag="Group1">1</TextBlock>
      <TextBlock Margin="15" Tag="Group1">2</TextBlock>
      <TextBlock Margin="15" Tag="Group1" Name="hte">3</TextBlock>
      <TextBlock Margin="15" Tag="Group1">4</TextBlock>
      <TextBlock Margin="15" Tag="Group1">5</TextBlock>
      <TextBlock Margin="15" Tag="Group1">6</TextBlock>
      <TextBlock Margin="15" Tag="Group2">1</TextBlock>
      <TextBlock Margin="15" Tag="Group2">2</TextBlock>
      <TextBlock Margin="15" Tag="Group2">3</TextBlock>
    </ListBox>-->
    <CheckBox Visibility="Collapsed" x:Name="checkBox" Height="22" Width="100" VerticalAlignment="Top" HorizontalAlignment="Left">123</CheckBox>
    
    <StatusBar HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="20" Grid.Row="1"/>
    <TextBox Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding SelectedIndex, ElementName=comboBoxFontName, Mode=TwoWay}" TextWrapping="Wrap" Margin="155,3.04,0,0" Grid.Row="1" d:LayoutOverrides="VerticalAlignment"/>
        <Label VerticalAlignment="Bottom" HorizontalAlignment="Left" Width ="600" DataContext="{Binding ElementName=gallery, Path=SelectedItem, Mode=OneWay}" Content="{Binding Text}"  Grid.Row="1" Padding="0" Margin="5,0,0,1"/>
        <!--Content="{Binding Text}"-->
    <!--<WebBrowser Source="http://fluent.codeplex.com" VerticalAlignment="Bottom" Height="100" Grid.Row="1"/>-->
  </Grid>

</Fluent:RibbonWindow>
